<!DOCTYPE html>

<html>

<head>

  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">

  <link rel="shortcut icon" type="image/x-icon" href="images/favicon.png">

  <title>PetClinic :: a Quarkus Framework demonstration</title>

  <!--[if lt IE 9]>
    <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
    <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->

  <link rel="stylesheet" href="css/petclinic.css" />

</head>

<body>

  <nav class="navbar navbar-default" role="navigation">
    <div class="container">
      <div class="navbar-header">
        <a class="navbar-brand" href="/"><span></span></a>
        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#main-navbar">
          <span class="sr-only">
            <os-p>Toggle navigation</os-p>
          </span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
        </button>
      </div>
      <div class="navbar-collapse collapse" id="main-navbar">   

        <ul class="nav navbar-nav navbar-right">

          {#if active is 'home'}
            <li class="active">
          {#else}
            <li>
          {/if}
            <a href="/" title="home page">
              <span class="glyphicon  glyphicon-home"
                aria-hidden="true"></span>
              <span>Home</span>
            </a>
          </li>

          {#if active is 'owners'}
            <li class="active">
          {#else}
            <li>
          {/if}
            <a href="/owners" title="find owners">
              <span class="glyphicon  glyphicon-search"
                aria-hidden="true"></span>
              <span>Find owners</span>
            </a>
          </li>

          {#if active is 'vets'}
            <li class="active">
          {#else}
            <li>
          {/if}
            <a href="/vets" title="veterinarians">
              <span class="glyphicon  glyphicon-th-list"
                aria-hidden="true"></span>
              <span>Veterinarians</span>
            </a>
          </li>

          {#if active is 'oups'}
            <li class="active">
          {#else}
            <li>
          {/if}
            <a href="/oups" title="trigger a RuntimeException to see how it is handled">
              <span class="glyphicon  glyphicon-warning-sign"
                aria-hidden="true"></span>
              <span>Error</span>
            </a>
          </li>

        </ul>
      </div>
    </div>
  </nav>

  <div class="container-fluid">
    <div class="container xd-container">